<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作类型映射关系测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-title {
            color: #409eff;
            border-bottom: 2px solid #409eff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .operation-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .operation-code {
            width: 30px;
            font-weight: bold;
            color: #666;
        }
        .operation-name {
            width: 120px;
            font-weight: bold;
        }
        .operation-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
        .tag-success {
            background-color: #f0f9ff;
            color: #67c23a;
            border: 1px solid #67c23a;
        }
        .tag-primary {
            background-color: #ecf5ff;
            color: #409eff;
            border: 1px solid #409eff;
        }
        .tag-warning {
            background-color: #fdf6ec;
            color: #e6a23c;
            border: 1px solid #e6a23c;
        }
        .tag-danger {
            background-color: #fef0f0;
            color: #f56c6c;
            border: 1px solid #f56c6c;
        }
        .tag-info {
            background-color: #f4f4f5;
            color: #909399;
            border: 1px solid #909399;
        }
        .tag-default {
            background-color: #f4f4f5;
            color: #606266;
            border: 1px solid #dcdfe6;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .comparison-table th,
        .comparison-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .comparison-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .old-value {
            color: #f56c6c;
            text-decoration: line-through;
        }
        .new-value {
            color: #67c23a;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>操作类型映射关系测试页面</h1>
    
    <div class="test-container">
        <h2 class="test-title">修正后的操作类型映射关系</h2>
        
        <div id="operationTypes"></div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">修改前后对比</h2>
        
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>类型代码</th>
                    <th>修改前</th>
                    <th>修改后</th>
                    <th>标签样式</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td class="old-value">入库</td>
                    <td class="new-value">新增</td>
                    <td><span class="operation-tag tag-success">success</span></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td class="old-value">出库</td>
                    <td class="new-value">定位器绑定</td>
                    <td><span class="operation-tag tag-primary">primary</span></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td class="old-value">移库</td>
                    <td class="new-value">定位器解绑</td>
                    <td><span class="operation-tag tag-warning">warning</span></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td class="old-value">装箱</td>
                    <td class="new-value">清洗</td>
                    <td><span class="operation-tag tag-info">info</span></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td class="old-value">拆箱</td>
                    <td class="new-value">折叠整理</td>
                    <td><span class="operation-tag tag-default">default</span></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td class="old-value">盘点</td>
                    <td class="new-value">装箱</td>
                    <td><span class="operation-tag tag-primary">primary</span></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td class="old-value">维修</td>
                    <td class="new-value">拆箱</td>
                    <td><span class="operation-tag tag-danger">danger</span></td>
                </tr>
                <tr>
                    <td>8</td>
                    <td class="old-value">报废</td>
                    <td class="new-value">封存</td>
                    <td><span class="operation-tag tag-info">info</span></td>
                </tr>
                <tr>
                    <td>9</td>
                    <td class="old-value">-</td>
                    <td class="new-value">解封</td>
                    <td><span class="operation-tag tag-success">success</span></td>
                </tr>
                <tr>
                    <td>10</td>
                    <td class="old-value">-</td>
                    <td class="new-value">维修</td>
                    <td><span class="operation-tag tag-warning">warning</span></td>
                </tr>
                <tr>
                    <td>11</td>
                    <td class="old-value">-</td>
                    <td class="new-value">检查</td>
                    <td><span class="operation-tag tag-default">default</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">标签颜色说明</h2>
        
        <div style="margin-bottom: 15px;">
            <h4>Element UI 标签类型对应的颜色：</h4>
            <div class="operation-item">
                <span class="operation-tag tag-success">success</span>
                <span style="margin-left: 10px;">绿色 - 用于积极的操作（新增、解封）</span>
            </div>
            <div class="operation-item">
                <span class="operation-tag tag-primary">primary</span>
                <span style="margin-left: 10px;">蓝色 - 用于主要操作（定位器绑定、装箱）</span>
            </div>
            <div class="operation-item">
                <span class="operation-tag tag-warning">warning</span>
                <span style="margin-left: 10px;">橙色 - 用于需要注意的操作（定位器解绑、维修）</span>
            </div>
            <div class="operation-item">
                <span class="operation-tag tag-danger">danger</span>
                <span style="margin-left: 10px;">红色 - 用于重要操作（拆箱）</span>
            </div>
            <div class="operation-item">
                <span class="operation-tag tag-info">info</span>
                <span style="margin-left: 10px;">灰蓝色 - 用于信息性操作（清洗、封存）</span>
            </div>
            <div class="operation-item">
                <span class="operation-tag tag-default">default</span>
                <span style="margin-left: 10px;">默认样式 - 用于常规操作（折叠整理、检查）</span>
            </div>
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">测试步骤</h2>
        
        <ol>
            <li><strong>前端验证</strong>：
                <ul>
                    <li>打开器具管理页面</li>
                    <li>点击任意器具的"详情"按钮</li>
                    <li>切换到"操作记录"标签页</li>
                    <li>验证操作类型显示文本是否正确</li>
                    <li>验证操作类型标签颜色是否合适</li>
                </ul>
            </li>
            <li><strong>数据验证</strong>：
                <ul>
                    <li>检查模拟数据中的操作类型是否使用新的映射关系</li>
                    <li>确认操作描述与操作类型匹配</li>
                </ul>
            </li>
            <li><strong>后端集成</strong>：
                <ul>
                    <li>确保后端返回的操作类型值与前端映射关系一致</li>
                    <li>验证数据库中的操作类型字段注释是否正确</li>
                </ul>
            </li>
        </ol>
    </div>

    <script>
        // 模拟前端的映射方法
        function getOperationTypeName(type) {
            const typeMap = {
                '1': '新增',
                '2': '定位器绑定',
                '3': '定位器解绑',
                '4': '清洗',
                '5': '折叠整理',
                '6': '装箱',
                '7': '拆箱',
                '8': '封存',
                '9': '解封',
                '10': '维修',
                '11': '检查'
            }
            return typeMap[type] || '未知'
        }

        function getOperationTypeTag(type) {
            const tagMap = {
                '1': 'success',   // 新增
                '2': 'primary',   // 定位器绑定
                '3': 'warning',   // 定位器解绑
                '4': 'info',      // 清洗
                '5': '',          // 折叠整理
                '6': 'primary',   // 装箱
                '7': 'danger',    // 拆箱
                '8': 'info',      // 封存
                '9': 'success',   // 解封
                '10': 'warning',  // 维修
                '11': ''          // 检查
            }
            return tagMap[type] || ''
        }

        // 渲染操作类型列表
        function renderOperationTypes() {
            const container = document.getElementById('operationTypes')
            let html = ''

            for (let i = 1; i <= 11; i++) {
                const type = i.toString()
                const name = getOperationTypeName(type)
                const tagType = getOperationTypeTag(type)
                const tagClass = tagType ? `tag-${tagType}` : 'tag-default'
                const tagText = tagType || 'default'

                html += `
                    <div class="operation-item">
                        <span class="operation-code">${type}</span>
                        <span class="operation-name">${name}</span>
                        <span class="operation-tag ${tagClass}">${tagText}</span>
                    </div>
                `
            }

            container.innerHTML = html
        }

        // 页面加载完成后渲染
        document.addEventListener('DOMContentLoaded', function() {
            renderOperationTypes()
            console.log('操作类型映射关系测试页面已加载')
        })
    </script>
</body>
</html>
